<template>
  <div class="iconBox">
    <swiper :options="swiperOptions">
      <swiper-slide v-for="(item, index) in page" :key="index">
        <div class="imgDiv" v-for="(items, index) in item" :key="index">
          <img :src="items.imageUrl" alt="" />
          <div>陆游</div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageList: [
        {
          id: "01",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "02",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "03",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "04",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "05",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "06",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "07",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "08",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "09",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        },
        {
          id: "10",
          imageUrl: "//s.qunarzz.com/homenode/images/touchheader/hotel.png",
        }
      ],
      swiperOptions:{}
    };
  },
  computed: {
    page() {
      let pages = [];
      this.imageList.forEach((item, index) => {
        let inx = Math.floor(index / 8);
        if (!pages[inx]) {
          pages[inx] = [];
        }
        pages[inx].push(item);
      });
      return pages;
    },
  },
};
</script>

<style lang='stylus' scope>
.iconBox 
    width 100%


  .imgDiv 
    padding-top: 0.2rem;
    padding-bottom: 0.1rem;
    font-size: 0.32rem;
    width: 25%;
    height: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    img 
      width: 1.1rem;
  
.swiper-slide
    display flex
    flex-flow wrap
</style>
